<template>
  <div class="tags-menu" :style="{left:clientX+'px',top:clientY+'px'}">
    <ul>
      <li v-for="item,index in tmenu" :key="index" v-show="isShow(index)" @click="hdClick(index)">
        <i :class="item.icon"></i>
        {{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["clientX", "clientY", "clickIndex", "tagsLength"],
  data() {
    return {
      tmenu: [
        {
          icon: "el-icon-refresh-right",
          text: "刷新页面",
        },
        {
          icon: "el-icon-close",
          text: "关闭当前",
        },
        {
          icon: "el-icon-circle-close",
          text: "关闭其他",
        },
        {
          icon: "el-icon-back",
          text: "关闭左侧",
        },
        {
          icon: "el-icon-right",
          text: "关闭右侧",
        },
        {
          icon: "el-icon-circle-close",
          text: "全部关闭",
        },
      ],
    };
  },
  methods: {
    hdClick(i) {
      //   子传父
      this.$emit("fn", i);
    },
    isShow(i) {
      if (this.tagsLength === 1) {
        // 相当于此时只有首页
        return i == 0;
      }
      // clickIndex 点击的标签的clickIndex
      // i是li 的index
      // 判断第一项没得关闭当前和关闭左侧
      if (this.clickIndex === 0) {
        //   用户点击首页
        // 要隐藏第2 和第4项
        // 方法一
        // if(i==1|| i==3){
        //     return false
        // }
        // return true
        // 方法二
        return ![1, 3].includes(i);
      }
      //   判断第二项没得关闭左侧
      if (this.clickIndex === 1 && this.clickIndex == this.tagsLength - 1) {
        return ![3, 4].includes(i);
      } else if (
        this.clickIndex === 1 &&
        this.clickIndex !== this.tagsLength - 1
      ) {
        // return ![3].includes(i);
        return i != 3;
      }

      //   判断最后一项没得关闭右侧
      if (this.clickIndex === this.tagsLength - 1) {
        // return ![4].includes(i);
        return i != 4;
      }
      return true;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.tags-menu {
  background-color: #fff;
  box-shadow: 2px 2px 4px #ccc;
  position: absolute;
  border-radius: 6px;
  ul {
    padding: 10px 0;
  }
  li {
    padding: 5px 15px 5px;
    cursor: pointer;
    &.hover {
      background-color: #fff;
    }
  }
}
</style>